<template>
  <div class="app-container">

    <el-steps :active="2" finish-status="success" simple style="margin-top: 20px">
      <el-step title="课程基本信息" ></el-step>
      <el-step title="课程章节小节" ></el-step>
      <el-step title="最终发布" ></el-step>
    </el-steps>

    <div class="publishInfo"  style="padding-top: 40px;margin-left: 200px">
      <div style="">
        <img :src="courseInfo.cover" style="height: 500px;width: 500px">
      </div>
      <div class="right" style="height: 500px;font-size: 40px;margin-left: 100px">
        <p>课程名：{{courseInfo.title}}</p>
        <p>讲师：{{courseInfo.teacherName}}</p>
        <p>所属分类：{{courseInfo.subjectName}}</p>
        <p>价格：<span style="color: red;font-size: 60px">￥{{courseInfo.price}}</span></p>
      </div>

    </div>
    <div align="right" style="margin-right: 300px;">
      <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="publish">最终发布</el-button>
    </div>

  </div>

</template>

<script>
  import course from '@/api/course'
  export default {
    name: "info",
    data() {
      return {
        courseId:this.$route.params.id,
        courseInfo:{},//课程发布信息
      };
    },
    created(){
      this.getPubLishInfo()
    },
    methods: {
      //发布课程
      publish() {
        course.pulishCourse(this.courseId)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            //跳转课程列表页
            this.$router.push({path:'/course/index'})
          })
      },
      //获取显示的信息
      getPubLishInfo(){
        course.getCoursePublishInfo(this.courseId)
          .then(response=>{
            this.courseInfo = response.data.courseInfo
          })
      },
      prev(){
        this.$router.push({path:'/course/chapter/'+this.courseId})
      }
    }
  }
</script>

<style scoped>
.publishInfo>div{
  display: inline-block;
}
  .publishInfo .right{
    overflow: hidden;
  }
</style>
